<template>
	<view class="flex_ZC">
	
		<view class="orderwrap">
			<view class="orderitem">
				<view class="itemtop">
					<view class="name">
						商品信息
					</view>
				</view>
				<view class="itemcenter" @click="toGoods(info.goods_id)">
					<image :src="info.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem">
							{{info.goods_name}}
						</view>
						<view class="itemcenterrightitem">
							<text class="textone">数量X{{info.num}}</text>
						</view>
						<view v-if="info.type==1"  class="itemcenterrightitem">
							￥{{info.price}}
						</view>
						<view v-if="info.type==2"  class="itemcenterrightitem">
							￥{{info.pay_price}}
						</view>
					</view>
				</view>
		
			</view>
		</view>

		<view class="groupBuying">
			<view class="stores flex_Z">
				<text class="f28 c3">店铺信息</text>
				<view class="stores_box flex_dq" @click="goseller">
					<image :src="info.local_seller.cover" mode="aspectFill"></image>
					<view class=" flex_Z">
						<text class="f28 c3 fw5">{{info.local_seller.name}}</text>
						<text class="f24 c6">{{info.local_seller.business_status_text}}</text>
						<text class="f24 c6" v-for="item in info.local_seller.business_hours" >{{item.start}}至{{item.end}}</text>
					</view>
				</view>
				<view class="navigation flex_ld">
					<view class="navigation_l flex_Z">
						<text class="f26 c3 overflow2">{{info.local_seller.full_address}}</text>
						<!-- <text class="f24 c9">距您{{info.distances}}km</text> -->
					</view>
					<view class="navigation_r flex_ld_b">
						<view class="navigation_r_box flex_ZC" @click="openLocation">
							<image :src="baseUrl +'/static/icon/i_dh.png'" mode="aspectFill"></image>
							<text>导航</text>
						</view>
						<view class="navigation_r_box flex_ZC" @click="callPhone">
							<image :src="baseUrl +'/static/icon/tel.png'" mode="aspectFill"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tg_detail flex_Z" v-if="info.type==1"  >
			<text class="f32 c3 fw5">团购详情</text>
			<view class="mart12  " v-for="(item,index) in info.team_detail">
				<text class="f28 c3">• {{item.name}}（{{item.number}}）</text>
				<text>￥{{item.price}}</text>
			</view>
		</view>

		<view class="tg_detail flex_Z"  v-if="info.type==1" >
			<text class="f32 c3 fw5">购买 须知</text>
			<view class="mart24 flex_Z" v-for="item in info.buy_note" :key="item.name">
				<text class="f26 c6">{{item.name}}</text>
				<text class="f28 c3" >• {{item.value}}</text>
			</view>
			<!-- <view class="mart24 flex_Z">
				<text class="f26 c6">可用时段</text>
				<text class="f28 c3">• 营业时间内可用</text>
			</view>
			<view class="mart24 flex_Z">
				<text class="f26 c6">使用规则</text>
				<text class="f28 c3">• 不可同时享受商家基他优惠</text>
				<text class="f28 c3">• 无需预约，消费高峰期可能需要等位</text>
			</view> -->
		</view>
		<view class="wrap">
			<view class="tit">
				订单信息
			</view>
			<view class="item">
				<text class="name">订单编号</text>
				<text class="time">{{info.order_no}}</text>
			</view>
			<view class="item">
				<text class="name">订单类型</text>
				<text class="time">{{info.type_text}}</text>
			</view>
			<view class="item">
				<text class="name">订单状态</text>
				<text class="time">{{info.status_text}}</text>
			</view>
			<view class="item">
				<text class="name">More券抵扣</text>
				<text class="time">{{info.deduction_amount}}</text>
			</view>
			<view class="item">
				<text class="name">实付金额</text>
				<text class="time">{{info.pay_price}}</text>
			</view>
			<view class="item">
				<text class="name">订单创建时间</text>
				<text class="time">{{info.create_time}}</text>
			</view>
			<view class="item">
				<text class="name">支付时间</text>
				<text class="time">{{info.pay_time}}</text>
			</view>
			<view class="item">
				<text class="name">支付方式</text>
				<text class="time">{{info.pay_way_text}}</text>
			</view>
			<view class="item" v-if="info.type==1&&info.last_verify_time">
				<text class="name">核销时间</text>
				<text class="time">{{info.last_verify_time}}</text>
			</view>
			<view class="item">
				<text class="name">获得More值</text>
				<text v-if="info.is_ticket == 0" class="time">{{info.gift_integral_total}}</text>
				<text v-if="info.is_ticket == 1" class="time">{{info.ticket_gift_integral}}</text>
			</view>
		</view>
		<!-- <view class="buynow flex_c" @click="payShow = true">
			<text @click="clickBuynow">立即抢购（送{{info.integral_proportion}}%More值）</text>
		</view> -->

		<view class="empty3"></view>

	
	
	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		localdetail
	} from "../../api/local.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				id: "",
				info:{
					local_seller:{
						name:"",
						full_address:""
					}
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getdetail()
		},


		methods: {
			goseller(){
				uni.redirectTo({
					url:"/pagesMy/groundCat/merchantHomepagew?id="+this.info.local_seller.id
				})
			},
			toGoods(id){
				uni.navigateTo({
					url: '/pagesMy/groundCat/groupBuyingDetails?id=' + id
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.local_seller.phone,
				});
			},
			openLocation() {
				// 测试先获取经纬度在导航
			
						const latitude = this.info.local_seller.latitude;
						const longitude = this.info.local_seller.longitude;
						console.log(latitude);
						console.log(longitude);
						uni.openLocation({
							latitude:  Number(latitude),
							longitude: Number(longitude),
							// #ifdef MP-ALIPAY
							name: this.info.local_seller.name,
							address: this.info.local_seller.full_address,
							// #endif
							success: function() {
								console.log('success');
							},
							fail: function(res) {
								console.log(res,'失败');
							},
						});
					
				
			},
			getdetail(){
				localdetail({
					id:this.id
				}).then(res=>{
					this.info=res.data
				})
			}


		},
	}
</script>

<style scoped  lang="scss">
	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.swipers {
		position: relative;
		width: 750rpx;
		z-index: 2;
	}

	.groupBuying {
		position: relative;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		margin-top: 26rpx;
	}

	.groupBuying>image {
		width: 100%;
		height: 154rpx;
	}

	.groupBuying_top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 154rpx;
		padding: 0 24rpx;
	}

	.give {
		width: 150rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-weight: 500;
		text-align: center;
		font-size: 24rpx;
		color: #F72535;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.marr10 {
		margin-right: 10rpx;
	}

	.marr18 {
		margin-right: 18rpx;
	}

	.tg_name {
		width: 650rpx;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f2f2f2f2;
		margin: 0 auto;
	}

	.interests {
		font-size: 24rpx;
		color: #666666;
		border-radius: 6rpx;
		padding: 4rpx 18rpx;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
	}

	.interests_box {
		display: flex;
		margin-top: 10rpx;
	}

	.stores {
		width: 100%;
		padding: 24rpx;
	}

	.stores_box {
		margin: 18rpx 0;
	}

	.stores_box>image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.tg_detail {
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		margin-top: 24rpx;
		padding: 30rpx 24rpx 20rpx;
	}

	.mart12 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.mart24 {
		margin-top: 24rpx;
	}

	.buynow {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
	}

	.buynow>text {
		width: 696rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.order_box {
		width: 750rpx;
		height: 660rpx;
		background: #F5F5F5;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 24rpx 30rpx 0;
	}

	.commodity {
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 18rpx 0;
	}

	.commodity_l {
		margin: 0 24rpx;
	}

	.commodity_l>image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx;
	}

	.commodity_r {
		width: 400rpx;
	}

	.mart18 {
		margin-top: 18rpx;
	}


	.coupon {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx 24rpx;
	}

	.coupon_l>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.settlement {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}

	.submit {
		width: 242rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 32rpx;
		background: #FFC300;
		text-align: center;
		border-radius: 40rpx;
	}

	/deep/.u-number-box__minus {
		width: 24px !important;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;

	}

	/deep/.u-number-box__plus {
		width: 24px !important;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border: 1rpx solid #FFC300;
		border-radius: 40rpx;
		color: #FFC300;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #FFC300;
		border-radius: 40rpx;
		color: #ffffff;
	}
	.keyboardss {
		width: 750rpx;
		padding: 50rpx 0;
		background: #ffffff;
	}
	.navigation {
		padding-top: 20rpx;
	}
	
	.navigation_l {
		width: 70%;
	}
	
	.navigation_r {
		width: 30%;
	}
	
	.navigation_r_box>image {
		width: 46rpx;
		height: 46rpx;
	}
	
	.navigation_r_box>text {
		font-size: 22rpx;
		color: #333333;
		margin-top: 10rpx;
	}
	.orderwrap {
		width: 750rpx;
		margin-top: 40rpx;

		.orderitem {
			width: 690rpx;
			min-height: 280rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.itemtop {
				display: flex;

				.name {
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;
					color: #333;
				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						white-space: nowrap;
						/* 强制文本不换行 */
						overflow: hidden;
						/* 隐藏溢出部分 */
						text-overflow: ellipsis;
						color: #333;
						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

		}
	}
	.wrap {
		width: 690rpx;
		min-height: 398rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding-bottom: 20rpx;
	}
	
	.tit {
		padding-top: 32rpx;
		margin-left: 24rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}
	
	.item {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		justify-content: space-between;
		margin-right: 40rpx;
		margin-top: 24rpx;
	
		.name {
			font-weight: 400;
			font-size: 28rpx;
			color: #A7A4AD;
		}
	
		.time {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>